/*变量*/
@gray:#ededee;
@gray-dark:#d6d6d6;
@blue:#4058c5;
/*混合*/
.block(@w,@h,@bgColor){
	width: @w;
	height: @h;
	background-color: @bgColor;
}
.radiusBlock(@w,@h,@bgColor,@radius){
	.block(@w,@h,@bgColor);
	/* Gecko browsers */
	-moz-border-radius: @radius; 
	/* Webkit browsers */
	-webkit-border-radius: @radius; 
	/* W3C syntax - likely to be standard so use for future proofing */
	border-radius:@radius;
}
.radius(@radius){
	/* Gecko browsers */
	-moz-border-radius: @radius; 
	/* Webkit browsers */
	-webkit-border-radius: @radius; 
	/* W3C syntax - likely to be standard so use for future proofing */
	border-radius:@radius;
}
.containTextCenter(@h){
	text-align: center;
	line-height: @h;
}
.shadow(@offx,@offy,@blur-radius,@spread-radius,@color){
	-moz-box-shadow:@offx @offy @blur-radius @spread-radius @color ;              
    -webkit-box-shadow:@offx @offy @blur-radius @spread-radius @color ;           
    box-shadow:@offx @offy @blur-radius @spread-radius @color ;
}
.noMarginPadding{
	margin: 0;
	padding: 0;
}
.listBlock{
	.noMarginPadding;
	list-style: none;
	li{
		padding: 0 10%;
		@h:36px;
		width: 100%;
		height: @h;
		line-height: @h;
		position: relative;
		a{
			display:inline-block;
		}
	}
}
.clearFloatAfter{
	content: '.';
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}
/*全局*/
body{
	min-width: 960px !important;
	background-color: @gray;
}
.header{
	width: 100%;
	margin-bottom: 20px;
}
.container{
	width: 80%;
}
/*header*/
//顶栏样式
#top_bar{
	height: 65px;
	width: 100%;

	.fixed_div{
		position: fixed;
		height: 65px;
		width: 100%;
		min-width: 960px;
		background-color: #5568D5;
		z-index: 10;
	}
	.fixed_div>div{
		margin-top: 15px;
		padding: 0;
	}
	.webTitle h2{
		margin-top: 0;
		color: #FFF;
		font: 33px/40px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	}
	a{
		text-decoration: none;
	}
	.top_btn{
		padding: 7px 15px;
		font: 23px/40px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
		color: #BCBCBC;
		opacity: 0.7;
		cursor: pointer;		
		&.active{    //.top_btn .active
			color: #FFF;
			opacity: 1.0;
		}
		&.log_reg{
			display: none;
			color: #FFF;
			opacity: 1.0;
		}
	}
	.user{
		display: none;
		width: 185px;
		font: 21px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
		color: #DADADA;
		cursor: pointer;
		ul{
			width: 185px;
			list-style: none;
			padding: 0;
			background-color: #5568D5;
			z-index: 100;
			li{
				padding: 10px 0;
				border-top: 1px solid #7B8DB5;
				&.avatar_userName{
					border: 0px;
					padding: 6px 0 15px 2px;
					a{
						text-decoration: none;
						color: #DADADA;
					}
					.log_avatar{
						float: left;
						overflow: hidden;	
						width: 35px;
						height: 35px;
						margin-top: -3px;
						margin-right: 7px;
						img{
							width: 100%;
						}
					}
				}
				&.hidden_first{
					display: none;
				}
				.glyphicon{
					margin-left: 0;
					padding: 0 8px 0 12px;
					font-size: 18px;
				}
				&:hover{
					color: #FFF;
				}
			}
		}
	}
}

/*个人中心*/
#myWorkToolbar{
	p{
		float: left;
	}
	#uploadWorkBtn,#editWorkBtn{
		float:right;
	}
	#editWorkBtn{
		margin-right: 10px;
	}
	height:40px;
	margin-bottom:5px;
}
.myWorkPic{
	position: relative;
	text-align:center;/*水平居中*/
	overflow: hidden;
	float: left;
	margin: 0 1.2% 1.2% 0;
	width: 24%;
	height: 0;
	padding-bottom: 24%;
	img{
		max-width: 100%;
	}
	.crossIcon{
		width:14px !important;
		height: 14px !important;
		position: absolute;
		right: 10px;
		top: 10px;
	}
}
.selectedWork{
	opacity: 0.8;
}

.hide{
	display: none;
}
.socialInfo{
	.block(100%,100%,white);
	.noMarginPadding;
	.shadow(0,0,2px,1px,@gray-dark);
}
.profile{
	.block(100%,100%,white);
	.noMarginPadding;
}
.profile img{
	margin:20px auto;
	width: 100px;
	height:100px;
}
.socialInfo{
	text-align: center;
}
.socialNum{
	border-bottom: 1px solid #f0f0f0;
}
#fansLink{
	cursor:pointer;
}
#followLink{
	cursor: pointer;
}
#pvText{
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 20px;
	padding: 10px;
}
.photo img{
	width: 70px;
	height: 70px;
}
.commentPhoto img{
	width: 40px;
	height: 40px;
}
.like{
	text-align: center;
}
/*tabs*/
.tabs{
	.block(100%,52px,white);
	.shadow(0,0,2px,1px,@gray-dark);
	ul{
		.noMarginPadding;
		li{
			@h:52px;
			.block(20%,@h,white);
			float: left;
			list-style: none;
			text-align: center;
			line-height: @h;
			.noMarginPadding;
		}
		li.active{
			color:@blue;
		}
		li:after{
				background-color: @gray;  
				bottom: 0;  
				content: "";  
				display: block;   
				position: relative;  
				top: -41px;  
				left: 0px;
				width: 1px; 
				height: 30px;
			}
		li:hover{
			cursor: pointer;
		}
	}
}

.tabs-body{
	width: 100%;
	margin-top: 10px;
	display: none;
}
.tabs-body .show{
	.tabs-body;
	display: block;
}
/*问题列表*/
.box_shadow(@right: 0px, @bottom: 4px, @blur: 10px, @spread: 10px, @color: #9A9293){
	-webkit-box-shadow: @right @bottom @blur @spread @color;
	   -moz-box-shadow: @right @bottom @blur @spread @color;
	        box-shadow: @right @bottom @blur @spread @color;
}
#myQuestion{
	padding: 0;
	.articles{
		//触发BFC模型，不会高度塌陷。
		float: left;
		//overflow: auto;	//用overflow会导致box-shadow无法正常显示
		margin-top: 25px;
		width: 100%;


		.left-col{
			float: left;
			position: relative;	//用于子元素绝对定位
			width: 13%;
			overflow: hidden;
			div{
				float:left;
				overflow: hidden;
				width: 75%;
				height:0;
				padding-bottom: 75%;
				img{
					float: left;
					width: 100%;
				}
			}
			.left-triangle{
				position: absolute;
				padding: 0;
				right: 0;
				top: 35%;
				width: 0;
				height: 0;
				border-right: 10px solid #FFF;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
			}
		}
		.right-col{
			overflow: hidden;
			float: left;
			width: 87%;
			background-color: #FFF;
			.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);

			.problem-details{
				width: 100%;
				padding: 0 3%;
				h5{
					margin: 5px 0;
					font: bold 16px "微软雅黑", "黑体","宋体",sans-serif;
					color: #2e2e2e;
				}
				h5:first-child{
					color: #445bc8;
					margin-top: 20px;
					font: 15px "微软雅黑", "黑体","宋体",sans-serif;
					a{
						text-decoration: none;
						color: #445bc8;
					}
				}
				h6{
					margin: 5px 0 13px 0;
					font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
					color: #959595;
					white-space: pre;
				}
				p{	//content
					a{
						text-decoration: none;
						white-space: pre;
					}
					margin-bottom: 15px;
					color: #2e2e2e;
					font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
					word-break: break-all;
				}
				.paintings{
					margin-right: -3%;
					img{
						width: 32.7%;
						padding-right: 3%;
					}
				}
				.tags-showAll{
					margin: 17px 0 13px 0;
					height: 20px;
					img{
						width: 17px;
					}
					.tags{
						position: relative;
						top: 2px;
						padding: 0 5px;
						font: 15px "黑体","宋体",sans-serif;
						color: #959595;
						&.viewNum{
							padding: 0;
						}
					}
					.showAll{
						float: right;
						text-decoration: none;
						margin-right: 6px;
						color: #3964CF;
						font: 17px/20px "黑体","宋体",sans-serif;
						cursor: pointer;
					}	
				}
			}
			.problem-comment{
				//overflow: auto;	//触发BFC
				div{
					float: left;
					width: 50%;
					height: 50px;
					text-align: center;
					border-top: 1px solid #CECECB;
					img{
						position: relative;
						top: 13px;
						width: 17px;
						cursor: pointer;
					}
					.num{
						position: relative;
						top: 15px;
						padding-left: 3px;
						font: 16px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
						color: #959595;
						cursor: pointer;
					}
					//有三列，包括回答
					&.three{
						width: 33.3%;
					}
				}
				.left-zan{
					border-right: 1px solid #CECECB;
				}
				.medium-answer{
					border-right: 1px solid #CECECB;
					cursor: pointer;
				}
				.right-comment{
					cursor: pointer;
					a{
						text-decoration: none;
					}
				}
			}
		}
		.show-comments{
			display: none;
			float: right;
			width: 87%;
			margin: 12px 0 20px 0;

			.bottom-triangle{
				position: relative;
				left: 75%;
				width: 0;
				height: 0;
				border-bottom: 10px solid #FFF;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
			}
			.main-answers{
				display: none;
				width: 100%;
				h2{
					//display: none;
					margin: 0;
					text-align: center;
					font: 18px/50px "黑体","宋体",sans-serif;
					background-color: #FFF;
					.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);
				}
				.answer-container{
					.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);
					margin-bottom: 20px;
					background-color: #FFF;
					.answerer-info{
						overflow: hidden;
						.answerer-left-col{
							float: left;
							overflow: hidden;
							width: 13%;
							margin-top: 10px;
							div{
								float: right;
								padding-bottom: 57%;
								width: 57%;
								height: 0;
								overflow: hidden;
								margin-right: 15%;
								img{
									float: right;
									width: 100%;
								}
							}
						}
						.answerer-right-col{
							float: left;
							overflow: hidden;
							width: 84%;
							h5{
								margin: 15px 0 3px 0;
								font: 16px "黑体","宋体",sans-serif;
								a{
									color: #3964CF;
									text-decoration: none;
								}
							}
							h6{
								margin: 0 0 5px 0;
								font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
								color: #8F8F8D;
								white-space: pre;
							}
						}
					}
					.talking-area{
						padding-bottom: 20px;
						.talking-content{
							width: 100%;
							overflow: hidden;	
							div{
								width: 45%;
								margin: 10px 22px 0 22px;
								padding: 10px;
								background-color: #CCF9AA;
								.radius(10px);
								p{
									font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
									color: #2e2e2e;
								}
							}
							.left{
								float: left;
							}
							.right{
								float: right;
								span{
									font: bold 16px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
								}
							}
						}
					}
				}

			}
			.main-comments{
				width: 100%;
				.box_shadow(0px, 3px, 4px, -2px, #9C9C9C);
				.comment-content{
					overflow: hidden;		//触发BFC
					width: 100%;
					padding: 2px 0;
					background-color: #FFF;
					border-bottom: 1px solid #CECECB;

					h2{
						margin: 0;
						text-align: center;
						font: 18px/50px "黑体","宋体",sans-serif;
						background-color: #FFF;
					}

					.comment-left-col{
						float: left;
						overflow: hidden;
						width: 13%;
						margin-top: 10px;
						div{
							float: right;
							margin-right: 15%;
							width: 57%;
							height: 0;
							padding-bottom: 57%;
							overflow: hidden;
							img{
								float: right;
								width: 100%;
							}
						}
					}
					.comment-right-col{
						float: left;
						overflow: hidden;
						width: 84%;
						p{
							a{
								text-decoration: none;
								white-space: pre;
							}
							margin-top: 10px;
							font: 15px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
							word-break: break-all;
							span{
								float: right;
								color: #3964CF;
								font: bold 15px "微软雅黑", "黑体","宋体",sans-serif;
								cursor: pointer;
							}
						}
						h5{
							margin: 15px 0 3px 0;
							font: 16px "黑体","宋体",sans-serif;
							a{
								color: #3964CF;
								text-decoration: none;
							}
						}
						h6{
							margin: 0 0 5px 0;
							font: 14px "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
							color: #8F8F8D;
							white-space: pre;
						}
					}
				}
			}
		}
	}
}
#myQuestion:after{

	.clearFloatAfter;
	
}
#myComment{
	#myQuestion;
}

.pic_row_4{
	width: 100%;
	.pic_row_item{
		width: 24.1%;
		float: left;
		margin: 0 1.2% 1.2% 0;
		img{
			width: 100%;
		}

	}
	.pic_row_item:last-child{
		margin-right: 0;
	}
	.pic_row:after{
		.clearFloatAfter;
	}
	margin:1% 0;
}

/*我的关注*/
.userList{
	.shadow(0,0,2px,1px,@gray-dark);
	list-style: none;
	width: 100%;
	padding: 0;
	img{
		width: 90px;
		height: 90px;
		float: left;
	}
	li{
		position: relative;
		padding: 20px;
		.block(100%,130px,white);
		border-bottom: solid 1px @gray;
	}
	h5{
		float: left;
		margin: 70px 0 0 10px;
	}
	button{
		margin-top: 28px;
		width: 84px;
		height: 34px;
		float: right;
	}
}
/*图库*/
.side_menu{
	padding: 0;
	background-color:#eee;
	padding: 0 0 0 10px;
}
.banner{
	margin-bottom: 10px;
	padding: 10%;
	.radiusBlock(100%,58%,white,2px);
	.shadow(0,0,1px,1px,@gray-dark);
	img{
		width: 80%;
	}
}
.banner :hover{
	cursor:pointer;
}
.banner img{
	width: 100%;
}

.side_menu_btn_container{
	.radiusBlock(100%,100%,white,2px);
	.shadow(0,0,1px,1px,@gray-dark);
	.side_menu_btnset{
		.noMarginPadding;
		list-style: none;
		li{
			padding: 0 10%;
			@h:36px;
			width: 100%;
			height: @h;
			line-height: @h;
			position: relative;
			.side_menu_btnIcon{
				.block(19px,18px,transparent);
				float: left;
				margin: 8px 10px;
				img{
					float: right;
				}
			}
			a{
				display:inline-block;
				text-decoration: none;
			}
			.side_menu_btnTag{
				.radiusBlock(35px,20px,@gray-dark,10px);
				float: right;
				margin: 8px 10px;
				color: white;
				.containTextCenter(20px);
			}
		}
	}

	#side_menu_btnset1:after{
		background-color: @gray;  
		margin: 10px auto;
		bottom: 0;  
		content: "";  
		display: block;   
		position: relative;  
		top: 0px;  
		left: 0px;
		width: 80%; 
		height: 1px;
	}
}
.pic_cat{
	padding-right: 20px;
}
.row_cat_col{
	padding: 0 10px 10px 0;
}
.row_cat_item{
	cursor:pointer;

}
.catogeryLink{
	display: block;
	border:1px solid @gray-dark;
	background-color: white;
	.radius(2px);
	text-align: center;
	width: 100%;
	height: 350px;
	.catPicWrapper{
		position: relative;
		width: 50%;
		margin: 40px auto;
	}
	img{
		width: 100%;
	}
}
/*图库子页面-图片*/
.img_content{

}
.cat_switcher_container{
	.radiusBlock(100%,100%,white,2px);
	.shadow(0,0,1px,1px,@gray-dark);
}
.cat_switcher{
	.listBlock;
	li{
		text-align: center;
	}
	li :after{
		background-color: @gray-dark;  
		bottom: 0;  
		content: "";  
		display: block;   
		position: relative;  
		top: 0px;  
		left: 0px;
		width: 100%; 
		height: 1px;
	}
	li a{
		text-decoration: none;
		color: black;
	}
	li.active a {
		color: @blue;
	}
}
.picLink{
	img{
		width: 100%;
	}
}
.contentBlock{
	width: 100%;
	.contentBlock_body{
		.pic_row_item{
			width: 19.2%;
			float: left;
			margin: 0.5% 1% 0.5% 0;
			.catPicWrapper{
				position: relative;
				width: 100%;

			}
			img{
				width: 100%;
			}
		}
		.pic_row_item:last-child{
			margin-right: 0;
		}
		.pic_row:after{
			.clearFloatAfter;
		}
		margin:1% 0;
	}
}
.contentBlock_heading{
	.radiusBlock(100%,57px,white,2px);
	.shadow(0,0,1px,1px,@gray-dark);
	line-height: 57px;
	color:@blue;
	p{
		margin-left: 20px;
	}
}
/*图库子页面-文字*/
.listItemGroup{
	.shadow(0,0,1px,1px,@gray-dark);
}
.listItem{
	.radiusBlock(100%,60px,white,2px);
	margin-bottom: 1px;
	a{
		float: left;
		height: 60px;
		width: 100%;
		text-decoration: none;
		padding: 0 20px;
		line-height: 60px;
	}
	.publishDate{
		float: right;
	}
	.campusImg{
		.block(40px, 40px,transparent);
		float: left;
		margin: 10px;
		img{
			width: 40px;
			height: 40px;
			float: right;
		}
	}
}

/*提问*/
.askContainer{
	width: 100%;
	height: 500px;
	.askHeader{
		.noMarginPadding;
		@h:40px;
		.block(100%,@h,@blue);
		line-height: @h;
		border-radius:6px 6px 0 0;
		outline:0;
		.askTitle{
			margin-left: 2.5%*0.95;
			display: inline-block;
			color: white;
		}
		.closeAskModalBtn{
			background: url("../../image/closeAskModalBtn.png");
			margin-right: 8px;
			margin-top: 8px;
			float: right;
			width: 24px;
			height: 24px;
		}
	}
	.askBody{
		@w:95%;
		.askInput{
			margin: 0 auto;
			width: @w;
			#askTitleInput{
				.radiusBlock(100%,51px,#ececec,2px);
				border: 1px solid @gray-dark;
			}
			#askDescription{
				.radiusBlock(100%,51px,#ececec,2px);
				border: 1px solid @gray-dark;
				height: 150px;
				outline:none;
				resize:none;
			}
			.askLabel{
				display: inline-block;
			}
			.uploadMediaBtn{
				margin-top: 7px;
				margin-right: 5px;
				width: 28px;
				height: 22px;
				float: right;
			}
			.selectedFileName{
				margin-top: 7px;
				margin-right: 5px;
				float:right;
			}
			#uploadImg{
				background: url("../../image/insertImg.png");
			}
			#uploadVideo{
				background: url("../../image/insertVideo.png");
			}
			form{
				display: none;
			}
		}
		.askTagGroup{
			width: @w;
			margin: 0 auto;
			@tagHeight:28px;
			height: @tagHeight*3;
			.askTag{
				float: left;
				.radiusBlock(60px,@tagHeight,@gray,10px);
				color: #959595;
				.containTextCenter(@tagHeight);
				margin-right: 5px;
			}
			.askTag.selected{
				background-color: @gray-dark;
			}
		}
		.askTagGroup:after{
			content: '.';
			height: 0;
			display: block;
			clear: both;
			visibility: hidden;
		}
		.askAnonymity{
			width: @w;
			margin: 0 auto;
			input{

			}
		}
		.actionBtns{
			width: @w;
			margin: 20px auto;
			button{
				float: right;
				margin-left:5px;
			}
			#cancelBtn{

			}
		}
	}
}

/*点击查看大图*/
#bigImg{
	width:100%;
}

/*footer*/
.footer{
	.block(100%,170px,white);
	font-family: "黑体","宋体",sans-serif;
	margin-top: 20px;
	padding:20px;
	border-top: 2px solid @gray-dark;
	.footerContent{
		width: 80%;
		height: 130px;
		position: relative;
		margin: 0 auto;
		.footerList{
			list-style: none;
			padding: 0;
			float: left;
			li{
				margin: 10px 0;
			}	
		}
		.icp{
			color: @gray-dark;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		h2{
			color: @blue;
			position: absolute;
			bottom: 0px;
			right: 0px;
		}

	}

}